<style>
  body {
      font-family: "Arial", "Helvetica", sans-serif;
      font-size: 0.8em;
  }

  a#toDrag, div#toDrag, #dropTarget {
      font-size: 20px;
      border: solid 1px blue;
      background: white;
      width: 100px;
      padding: 1em;
      display: block;
      color: #000099;
      position: relative;
      font-family: "Times New Roman", serif;

  }

  code {
      font-size: 1.3em;
  }

  img#toDrag {
      border: none;
  }

  a#toDrag, div#toDrag {
      background-color: red;


  }

  #dropTarget {
      font-size: .9em;
      font-family: "MS Sans Serif", sans;
      height: 170px;
      margin-top: 2em;

      /*
       * Must be relative or absolute in order for
       * DragDropHelpers.getEventCoords() to work correctly in Firefox.
       */
      position: relative;
  }

  .caption {
      text-align: center;
      margin-top: 0.3em;
  }

  #toDrag, #dropTarget, fieldset {

  }

  #eventLog {
      top: 13em;
      left: 18em;
      position: absolute;
  }

  #eventNotice {
      display: block;
      overflow: scroll;
      width: 41em;
      height: 15em;
      border: solid 1px black;
      margin-bottom: 2em;
  }


  iframe {
      height: 20em;
  }

</style>
<script>
  var dragObject = new function () {
    var me = this;

    var dragNode, targetNode;
    var eventNoticeNode, dragEventNoticeNode;
    me.init = function () {
      dragNode = document.getElementById('toDrag');
      targetNode = document.getElementById('dropTarget');
      eventNoticeNode = document.getElementById('eventNotice');
      dragEventNoticeNode = document.getElementById('dragEventNotice');

      /* These are events for the draggable object */
      dragNode.addEventListener("dragstart", dragStartEvent, true);
      dragNode.addEventListener("drag", dragEvent, true);
      dragNode.addEventListener("dragend", dragEndEvent, true);

      targetNode.addEventListener("dragover", dragOverEvent, true);
      targetNode.addEventListener("drop", dropEvent, true);
    };

    function dragStartEvent(e) {
      showMessage("Drag Event started");
    }

    function dragEvent(e) {
      dragEventNoticeNode.innerHTML = "Currently dragging.<br />";
    }

    function dragEndEvent(e) {
      showMessage("Drag Event stopped");
      dragEventNoticeNode.innerHTML = "Dragging stopped."
    }

    function dragOverEvent(e) {
      showMessage("Drag Over event");
      e.preventDefault()
    }

    function dropEvent(e) {
      showMessage("Drop event happened on node with id " + this.id);
      e.preventDefault()
    }

    function showMessage(message) {
      eventNoticeNode.innerHTML = message + "<br/>" + eventNoticeNode.innerHTML;
    }
  };

  $(document).ready(dragObject.init);
</script>
<h1>
  Example #3: a dragable object with a drop target
</h1>
<p>
  Try to drag the red box around and dropping it in the target object.
</p>
<p>
  <strong>
    Is dragging:
  </strong>
  <span id="dragEventNotice">
    no
  </span>
</p>
<p id="eventLog">
  <strong>
    Event now firing:
  </strong>
  <br />
  <span id="eventNotice"></span>
</p>
<a href="#" id="toDrag" draggable="true">
  This is a draggable item
</a>
<div id="dropTarget">
  This is a "target" object
</div>